/*
 * 修改密码
 * @author budao
 * @time 2019/05/28
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Modal,Row,Col,Spin,Input,Button,message} from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './changmobileapplyStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import FlagBtn from 'widget/FlagBtn/FlagView'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'

const FormItem = Form.Item;
// import { download } from "utils/util"
const confirm = Modal.confirm;

//form默认样式
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 17 },
};

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  const { detail}  = modelObj
  console.log(detail)
  //数据操作
  function inputChange(value,key,index){
    detail[key] = value;
    console.log(value,key,index)
    dispatch({type: `${namespace}/updateStore`, payload: {detail}})
  }

  function toPWD(e){
    if(!detail.user_id){
      message.error('请输入用户账户ID');
      return
    }else{
      dispatch({
        type:`${namespace}/Random`,
          payload:{detail}
        })
    }
  
    // console.log(e)
    //获取随机因子
  }
  
  //提交
  function submit() {
    form.validateFields((err, values) => {
      if(!err){
        dispatch({type: `${namespace}/changePhone`})
      }
    });
  }

  // function detailModal(item){
  //   // console.log(item)
  //   updateModal(true)
  //   dispatch({
  //     type:`${namespace}/updateStore`,
  //     payload:{item:item}
  //   })
   
   
  // }
  // function updateModal(type){
  //   dispatch({
  //     type:`${namespace}/updateStore`,
  //     payload:{shareModal:type}
  //   })
  // }
 
  
 
  
  return (
    <div>
          
      <div className={cx('pageLayout')}>
        <Form>
           <CollapsiblePanels title="修改绑定手机" hideUpDownBtn={true} >
             <Row>
               <Col className="col" span={12}>
                <FormItem {...formItemLayout} label="用户账户ID">
                  {getFieldDecorator('user_id', {
                    initialValue: '',
                    rules: [
                      { required: true, whitespace: true, message: '请输入用户账户ID' },
                    ],
                  })(<Input
                      placeholder='请输入用户账户ID'
                      onChange={(e) => { inputChange(e.target.value, 'user_id') }}
                  />)}
                </FormItem>
               </Col>
               </Row>
               <Row>
                <Col className="col" span={12}>
                  <FormItem {...formItemLayout} label="旧手机">
                    {getFieldDecorator('reg_phone', {
                      initialValue: '',
                      rules: [
                        { required: true, whitespace: true, message: '请输入旧手机' },
                      ],
                    })(<Input
                        placeholder='请输入旧手机'
                        onChange={(e) => { inputChange(e.target.value, 'reg_phone') }}
                    />)}
                  </FormItem>
                </Col>
               </Row>
              <Row>
                <Col className="col" span={12}>
                  <FormItem {...formItemLayout} label="新手机">
                    {getFieldDecorator('reg_phone_new', {
                      initialValue: '',
                      rules: [
                        { required: true, whitespace: true, message: '请输入新手机' },
                      ],
                    })(<Input
                        placeholder='请输入新手机'
                        onChange={(e) => { inputChange(e.target.value, 'reg_phone_new') }}
                    />)}
                  </FormItem>
                </Col>
              </Row>
               <Row>
               <Col className="col" span={12}>
                <FormItem {...formItemLayout} label="交易密码密文">
                  {getFieldDecorator('password', {
                    initialValue: '',
                    rules: [
                      { required: true, whitespace: true, message: '请输入交易密码密文' },
                    ],
                  })(<Input
                      placeholder='请输入交易密码密文'
                      onChange={(e) => { inputChange(e.target.value, 'password') }}
                  />)}
                </FormItem>
               </Col>
               <Col className="col" span={12}>
                    <Button type='primary' style={{marginLeft:'20px',marginTop:'4px'}} onClick={(e)=>{toPWD(e)}}>打开密码控件</Button>
               </Col>
               </Row>
               <Row>
               <Col className="col" span={12} style={{textAlign:"right"}}>
                    <Button type='primary' onClick={e =>submit()}>修改手机</Button>
               </Col>
               </Row>
             
           </CollapsiblePanels>
        </Form>
      </div>
    </div>
    
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))